Skip to content

[Settings] Fix Quick Accent language list being cropped and not reflowing contents#45986

Open
daverayment wants to merge 2 commits intomicrosoft:mainfrom
daverayment:fix/settings-quick-accent-language-list
Open

[Settings] Fix Quick Accent language list being cropped and not reflowing contents#45986
daverayment wants to merge 2 commits intomicrosoft:mainfrom
daverayment:fix/settings-quick-accent-language-list

Conversation

@daverayment
Copy link
Collaborator

@daverayment daverayment commented Mar 8, 2026

Summary of the Pull Request

The Character sets list on the Quick Accent settings page had a fixed 3-column layout. This caused two negative user experience issues that this PR solves:

  1. The contents were clipped. When the settings window was resized to be smaller, the rightmost column(s) were cut off rather than reflowing.
  2. The control displayed unnecessary horizontal and vertical scrollbars nested within the page.

PR Checklist

  • Communication: I've discussed this with core contributors already. If the work hasn't been agreed, this work might be rejected
  • Tests: Added/updated and all pass
  • Localization: All end-user-facing strings can be localized
  • Dev docs: Added/updated
  • New binaries: Added on the required places
  • Documentation updated: If checked, please file a pull request on our docs repo and link it here: #xxx

Detailed Description of the Pull Request / Additional comments

I believe the root cause is that the ItemsWrapGrid is contained within the ListView's built-in ScrollViewer which was able to expand infinitely horizontally. During initial layout, the MaxWidth binding to the parent SettingsGroup's ActualWidth was respected and the layout clamped the measurement appropriately, resulting in the correct number of columns. However, on resize the unbounded ScrollViewer's infinite horizontal constraint took precedence and the reflow into fewer columns never happened - the ScrollViewer never invalidated its children's measure because, from its perspective, their available width (infinite) had not changed. (I think - WinUI's layout and measure cycle melts my brain.)

The fix required replacing the MaxWidth binding on ItemsWrapGrid with a SizeChanged handler on the parent SettingsCard. The handler reads the parent card's padding (58 pixels left and 44 pixels right) and explicitly sets the language set ListView.MaxWidth accordingly. A Loaded handler for the card ensures the correct layout on first render.

The HorizontalScrollbar that caused the layout issue has been removed.

Screenshots

3-column view:
image

Resized to 2-columns:
image

Resized to single-column:
image

Validation Steps Performed

(All manual tests.)

Verified that:

  • The 3-column layout is shown when there is enough space (this is the maximum number of columns because of the page-level constraint.
  • The 3-column layout correctly resizes to 2-column then to a single-column layout when the window is resized, then back again when made larger.
  • The single-column list is shown when the Settings window is opened at minimum size.
  • Selection behaviour performed identically.

@daverayment daverayment added the Product-Settings The standalone PowerToys Settings application label Mar 8, 2026
@niels9001 niels9001 requested a review from Copilot March 8, 2026 16:19
niels9001
niels9001 approved these changes Mar 8, 2026
View reviewed changes
Copy link
Collaborator

@niels9001 niels9001 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Tested, works great!! Thanks @daverayment !

Copilot AI reviewed Mar 8, 2026
View reviewed changes
Copy link
Contributor

Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

Updates the Quick Accent settings page to make the “Choose character sets” list responsive to window resizing, preventing cropped columns and removing the nested scrollbar behavior.

Changes:

  • Adds Loaded and SizeChanged handlers on the containing SettingsCard to update the language ListView.MaxWidth based on the card’s current width/padding.
  • Removes the ItemsWrapGrid.MaxWidth binding that prevented reflow on resize.
  • Disables the ListView’s vertical scrolling to avoid nested scrollbars within the page.

Reviewed changes

Copilot reviewed 2 out of 2 changed files in this pull request and generated 2 comments.

File Description
src/settings-ui/Settings.UI/SettingsXAML/Views/PowerAccentPage.xaml Wires up card events, adjusts ListView scrolling behavior, and tweaks wrapping/item sizing for the character set list.
src/settings-ui/Settings.UI/SettingsXAML/Views/PowerAccentPage.xaml.cs Implements width recalculation logic to keep the ListView constrained to the SettingsCard’s available content width.

src/settings-ui/Settings.UI/SettingsXAML/Views/PowerAccentPage.xaml.cs Outdated
Comment on lines +112 to +113
QuickAccent_Language_Select.MaxWidth =
card.ActualWidth - card.Padding.Left - card.Padding.Right;
Copy link

Copilot AI Mar 8, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

card.ActualWidth - card.Padding.Left - card.Padding.Right can go negative (e.g., during initial layout when ActualWidth is 0, or if the card becomes narrower than its padding). FrameworkElement.MaxWidth does not accept negative values and can throw. Clamp the computed value to >= 0 (or at least QuickAccent_Language_Select.MinWidth) before assigning to QuickAccent_Language_Select.MaxWidth.

Suggested change
QuickAccent_Language_Select.MaxWidth =
card.ActualWidth - card.Padding.Left - card.Padding.Right;
var availableWidth = card.ActualWidth - card.Padding.Left - card.Padding.Right;
var minWidth = QuickAccent_Language_Select.MinWidth;
QuickAccent_Language_Select.MaxWidth = global::System.Math.Max(minWidth, availableWidth);

Copilot uses AI. Check for mistakes.
Copy link
Collaborator

@niels9001 niels9001 Mar 9, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@daverayment

Copy link
Collaborator Author

@daverayment daverayment Mar 9, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Sure, @niels9001. I will add the defensive check around this to make sure it doesn't go negative.

I'm away atm, but can look at this later today.

Copy link
Collaborator Author

@daverayment daverayment Mar 9, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Added with commit f994129

@daverayment
Add defensive check to prevent potential negative width for the langu…
f994129 
…age lists. Add comments. Remove redundant ItemsWrapGrid.ItemWidth.
@niels9001
Copy link
Collaborator

niels9001 commented Mar 10, 2026

/azp run

@azure-pipelines
Copy link

azure-pipelines bot commented Mar 10, 2026

Azure Pipelines successfully started running 1 pipeline(s).

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

Copilot code review Copilot Copilot left review comments

@niels9001 niels9001 niels9001 approved these changes

Assignees

No one assigned

Labels

Product-Settings The standalone PowerToys Settings application

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

[Settings] Quick Accent language set list is cut off and does not resize correctly

3 participants

@daverayment @niels9001